<template>
    <div>
        <b-navbar toggleable="lg" sticky>
            <b-navbar-brand href="/"> 校园 JOB</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-nav-item v-for="(nav,index) in navMenus" :key="index" @click="goHref(nav)">
                        <b-icon :icon="nav.icon" aria-hidden="true"></b-icon> {{nav.name}}
                    </b-nav-item>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>

    </div>
</template>



<script>
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    import local from "@/store/local";

    export default {
        name: "navBar",
        components: {

        },
        data() {
            return {

                navMenus: [{
                        name: '首页',
                        href: '/',
                        icon: "house-door",
                    }, {
                        name: '招聘职位',
                        href: '/position',
                        icon: "person-lines-fill",
                    }, {
                        name: '登陆',
                        href: '/login',
                        icon: "person-bounding-box",

                    },
                    {
                        name: '注册',
                        href: '/register',
                        icon: "person",

                    },
                    {
                        name: '进入后台',
                        href: '/index',
                        icon: "grid",

                    },
                ],
                typedStrings: ["Welcome to the website", '欢迎进入本网站'],

            }
        },


        methods: {
            goHref(nav) {
                console.log("tioazhuang", nav);
                if (nav.href == '#/index') {
                    if (local.getToken()) {
                        this.$router.push(nav.href)
                    } else {
                        this.$router.push("#/login")
                        this.$message.info("请先登录")

                    }
                }
                this.$router.push(nav.href)
            }
        },
    }
</script>
<style lang="scss" scoped>
    * {
        box-sizing: border-box;

    }

    a {
        text-decoration: none;
        color: #333;
    }


    nav.navbar {
        transition: backgroundColor .5s;
        /* position: fixed; */
        position: relative;
        width: 100%;
        margin: 0 auto;
        top: 0;
        background-color: #3e70a1;

        .navbar-brand {
            padding: 0 10vw;
            color: #fff
        }

        .navbar-collapse {
            padding-left: 20vw;

            ul li {
                margin: 0 1vw;

                a {
                    transition: all .5s;
                    color: #fff;
                }
            }


            ul li a:hover {
                transform: scale(1.2);
                background-color: #fff;
                border-radius: 5%;
                color: #3e70a1;
            }


        }

    }
</style>